import style from './preview.less';
import type { NoticeBookType } from '@/models/noticeBook';
import { connect } from 'umi';
interface PreviewProps {
  url?: string;
  name?: string;
}
import img from './template.png';

const Preview = ({
  name,
  score,
  comment,
}: {
  name: NoticeBookType['name'];
  score: NoticeBookType['score'];
  comment: NoticeBookType['comment'];
}) => {
  const url = img;

  return (
    <div
      className={style.scoreTemplate}
      id={'TemplatePreview'}
      style={{
        width: '764px',
        height: '1052px',
        backgroundSize: 'cover',
        backgroundImage: `url(${url})`,
        // https://img.js.design/assets/img/6361e55cf0632576635fffe0.png#2af78920443a58cf03a5498b0b08afdf
      }}
    >
      <div className={style.scoreTemplate__name}>{name}</div>
      <div className={style.scoreTemplate__headTeachername}>{name}</div>
      <div className={style.scoreTemplate__score}>
        <div />
        <div>{score.chinese}</div>
        <div>{score.math}</div>
        <div>{score.english}</div>
        <div>{score.totalScore}</div>
      </div>
      <div className={style.scoreTemplate__comment}>
        {comment.map((item) => {
          return (
            // eslint-disable-next-line react/jsx-key
            <div>
              {item.user === 'headTeacher' ? '班主任' : item.user}: {item.detail}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default connect(({ noticeBook }: { noticeBook: NoticeBookType }) => ({
  name: noticeBook.name,
  score: noticeBook.score,
  comment: noticeBook.comment,
}))(Preview);
